<template>
  <div>
    <div>
      <p>{{ username }}</p>
      <div>
        <img src="@/assets/img/phonelogin.png" style="width: 30px" alt="" />
        <span v-if="user.phone"
          >已绑手机{{ user.phone
          }}<a class="bindingmsg" @click.prevent="dialogVisible2 = true"
            >绑定信息</a
          >
          <el-dialog
            title="手机绑定信息"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose"
          >
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="delbinding">解除绑定</el-button>
            </span>
          </el-dialog>
        </span>

        <span v-else
          ><el-button @click="dialogVisible = true">绑定手机</el-button></span
        >
        <el-dialog
          title="绑定手机"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-input
                v-model="form.phone"
                placeholder="手机号"
                style="width: 200px; margin-right: 10px"
              ></el-input>
              <el-button type="primary" @click="sendcode">发送验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.code"
                placeholder="验证码"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="surebinding">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div>
      <p>实名信息</p>
      <table>
        <tr class="hang">
          <td class="lie">实名认证</td>
          <td class="lie">认证情况</td>
        </tr>
        <tr>
          <td class="lie">真实姓名</td>
          <td class="lie"></td>
        </tr>
        <tr>
          <td class="lie">身份信息</td>
          <td class="lie"></td>
        </tr>
        <tr>
          <td class="lie">教师信息</td>
          <td class="lie"></td>
        </tr>
      </table>
    </div>
    <div>
      <p>个人信息</p>
      <table>
        <tr>
          <td class="lie">昵称</td>
          <td class="lie"></td>
        </tr>
        <tr>
          <td class="lie">联系地址</td>
          <td class="lie"></td>
        </tr>
        <tr>
          <td class="lie">邮箱</td>
          <td class="lie">
            <span v-if="user.email"
              >已绑邮箱{{ user.email
              }}<a class="bindingmsg" @click="dialogVisible3 = true"
                >绑定信息</a
              >
              <el-dialog
                title="邮箱绑定信息"
                :visible.sync="dialogVisible3"
                width="30%"
                :before-close="handleClose"
              >
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible3 = false">取 消</el-button>
                  <el-button type="primary" @click="delbindingemail"
                    >解除绑定</el-button
                  >
                </span>
              </el-dialog>
            </span>
            <span v-else
              ><el-button @click="dialogVisible4 = true"
                >绑定邮箱</el-button
              ></span
            >
            <el-dialog
          title="绑定邮箱"
          :visible.sync="dialogVisible4"
          width="30%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
              <el-input
                v-model="form.email"
                placeholder="邮箱号"
                style="width: 200px; margin-right: 10px"
              ></el-input>
              <el-button type="primary" @click="sendcodeemail">发送验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="form.code"
                placeholder="验证码"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible4 = false">取 消</el-button>
            <el-button type="primary" @click="surebindingemail">确 定</el-button>
          </span>
        </el-dialog>
          </td>
        </tr>
        <tr>
          <td class="lie">头像</td>
          <td class="lie">
            <img v-if="user.adsphoto != null" :src="url + user.adsphoto" alt="">
            <img v-if="user.userphoto != null" :src="url + user.userphoto" alt="">
            <img v-else src="@/assets/img/tx.png" alt="">
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    username: {
      type: String,
    },
  },
  data() {
    return {
      user: [],
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      url: 'http://rnn0pzf74.hd-bkt.clouddn.com/',
      form: {
        phone: '',
        code: '',
        email: ''
      },
    }
  },
  created() {
    this.start()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async start() {
      const { data: res } = await axios.get(
        'http://localhost:81/user/selectUserByUserName',
        {
          params: {
            username: this.username,
          },
        }
      )
      console.log('根据用户名查到用户信息', res)
      if (res.code == 200) {
        this.user = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    async sendcode() {
      console.log('发送验证码' + this.form.phone)
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/
      var flag = reg.test(this.form.phone)
      if (!flag) {
        //不通过
        this.$message.error('请输入正确手机号')
        return null
      }
      const { data: res } = await axios.get(
        'http://localhost:81/checkCode/bindingphone',
        {
          params: {
            phone: this.form.phone,
          },
        }
      )
      console.log('绑定手机', res)
      if (res.code == 200) {
        this.$message.success('验证码发送成功')
      } else {
        this.$message.error(res.msg)
      }
    },
    // 确定绑定手机
    async surebinding() {
      const { data: res } = await axios.get(
        'http://localhost:81/user/surebinding',
        {
          params: {
            username: this.username,
            phone: this.form.phone,
            vcode: this.form.code,
          },
        }
      )
      console.log('确定绑定手机', res)
      if (res.code == 200) {
        this.$message.success('绑定成功')
        this.dialogVisible = false
        this.form = {}
        this.start()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 解除绑定
    async delbinding() {
      const { data: res } = await axios.get(
        'http://localhost:81/user/jcpbinding',
        {
          params: {
            username: this.username,
          },
        }
      )
      console.log('解除绑定手机', res)
      if (res.code == 200) {
        this.dialogVisible2 = false
        this.form = {}
        this.$message.success('解除绑定成功')
        this.start()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 邮箱绑定发送验证码
    async sendcodeemail(){
      var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
      var flag = reg.test(this.form.email)
      if(!flag){
        this.$message.error("请输入正确邮箱")
        return null
      }
      const {data:res} = await axios.get('http://localhost:81/checkCode/bindingEmail',{
        params:{
          email: this.form.email
        }
      })
      console.log("邮箱发送短信",res);
      if(res.code == 200){
        this.$message.success("验证码发送成功")
      }else{
        this.$message.error(res.msg)
      }
    },
    // 确定绑定邮箱
    async surebindingemail(){
      const{data:res} = await axios.get('http://localhost:81/checkCode/sureBindingEmail',{
        params:{
          email: this.form.email,
          vecode: this.form.code,
          username: this.username
        }
      })
      console.log("确定绑定邮箱",res);
      if(res.code == 200){
        this.$message.success("绑定邮箱成功")
        this.dialogVisible4 = false
        this.form = {}
        this.start()
      }else{
        this.$message.error(res.msg)
      }
    },
    // 解除绑定邮箱
    async delbindingemail() {
      const { data: res } = await axios.get(
        'http://localhost:81/user/jcpbindingemail',
        {
          params: {
            username: this.username,
          },
        }
      )
      console.log('解除邮箱绑定', res)
      if (res.code == 200) {
        this.dialogVisible3 = false
        this.form = {}
        this.$message.success('解除绑定成功')
        this.start()
      } else {
        this.$message.error(res.msg)
      }
    },
  },
}
</script>

<style lang="less" scoped>
p {
  font-weight: bold;
}
.bindingmsg {
  cursor: pointer;
  color: rgb(50, 119, 223);
}
.lie {
  width: 300px;
  height: 80px;
  border-bottom: 1px solid #666;
  img{
    width: 60px;
    height: 60px;
  }
}
</style>
